<template>
  <div class="home-page">
    <header class="home-page-banner"></header>
    <nav class="home-page-nav">
      <router-link class="home-page-nav-item" :to="{path: '/brandNameCard', query: {'catid': catid}}">
        <img class="nav-icon" src="http://img.brandzw.com/skin/default/images/m-brand-icon.png" alt="">
        <p>品牌名片</p>
      </router-link>
      <router-link class="home-page-nav-item" :to="{path: '/successfulCase', query: {'catid': catid}}">
        <img class="nav-icon" src="http://img.brandzw.com/skin/default/images/m-success-case-icon.png" alt="">
        <p>成功案例</p>
      </router-link>
      <router-link class="home-page-nav-item" to="/purposeOfActivity">
        <img class="nav-icon" src="http://img.brandzw.com/skin/default/images/m-activity-aim-icon.png" alt="">
        <p>活动宗旨</p>
      </router-link>
    </nav>
    <section>
      <div class="home-page-title">
        <h1>
          品牌名片
          <router-link class="more-text" :to="{path: '/brandNameCard', query: {'catid': catid}}">更多<span class="more-icon"></span></router-link>
        </h1>
      </div>
      <div class="brand-list">
        <BrandItem v-for="item in brandList" :key="item.itemid" :img="item.thumb" :name="item.title" :desc="item.introduce" :itemid="item.itemid" :isDefault="isDefault" @click.native="goCardDetail(item.itemid)"></BrandItem>
      </div>
      <div class="more-btn-box">
        <router-link class="btn more-btn" :to="{path: '/brandNameCard', query: {'catid': catid}}">
          查看更多
        </router-link>
      </div>
    </section>
    <section>
      <div class="home-page-title">
        <h1>
          成功案例
          <router-link class="more-text" :to="{path: '/successfulCase', query: {'catid': catid}}">
            更多<span class="more-icon"></span>
          </router-link>
        </h1>
      </div>
      <div>
        <SuccessfulCaseItem v-for="item in caseList" :key="item.catid" :catName="item.catname" :catid="item.catid" :year="item.year" :date="item.addtime" @click.native="goSuccessDetail(item.bangdan_catid)"></SuccessfulCaseItem>
      </div>
      <div class="more-btn-box more-btn-box-2">
        <router-link class="btn more-btn" :to="{path: '/successfulCase', query: {'catid': catid}}">
          查看更多
        </router-link>
      </div>
      <MyFooter :introduceShow="true"></MyFooter>
      <ReturnItem :isBack="true" v-if="catid"></ReturnItem>
    </section>
  </div>
</template>

<script>
import BrandItem from './components/BrandItem'
import SuccessfulCaseItem from '../../components/SuccessfulCaseItem'
import MyFooter from '../../components/MyFooter'
import ReturnItem from './components/ReturnItem'
import * as events from '../../store/events'

export default {
  components: {
    BrandItem,
    SuccessfulCaseItem,
    MyFooter,
    ReturnItem
  },
  data() {
    return {
      brandList: [],
      caseList: [],
      isDefault: false,
      catid: this.$route.query.catid
    }
  },
  mounted() {
    this.$showLoading()
    // 获取列表
    this.getHomePage()
  },
  methods: {
    getHomePage() {
      this.$api.postHomePage().then(data => {
        this.$hideLoading()
        if (data.data.status == 1) {
          // 解决ios回退白屏的问题，勿删
          window.scrollTo(0, 1)
          window.scrollTo(0, 0)
          this.brandList = data.data.cardList
          if (this.brandList.length < 8) {
            this.isDefault = true
          }
          this.caseList = data.data.caseList
          // 客服数据
          let service = {
            email: data.data.setting.service_email,
            tel: data.data.setting.service_tel
          }
          // 客服数据存到store中
          this.$store.commit(events.SET_SERVICE_INFO, service)
        }
      }).catch(err => {
        this.$hideLoading()
        console.log(err)
      })
    },
    goCardDetail(itemid) {
      if (this.catid) {
        this.$router.push('/brandNameCardDetail/' + itemid + '/?catid=' + this.catid)
      } else {
        this.$router.push('/brandNameCardDetail/' + itemid)
      }
    },
    goSuccessDetail(catid) {
      if (this.catid) {
        this.$router.push('/newEndPage/?successCatid=' + catid + '&pageform=successfulCase' + '&catid=' + this.$route.query.catid)
      } else {
        this.$router.push('/newEndPage/?successCatid=' + catid + '&pageform=successfulCase')
      }
    }
  }
}
</script>

<style scoped lang="scss">
.home-page {
  padding-top: 1px;
  .home-page-nav {
    width: 6.9rem;
    height: 1.8rem;
    margin: auto;
    box-shadow: 0 0 0.08rem 0 rgba(0, 0, 0, 0.1);
    border-radius: 0.04rem;
    display: flex;
  }
  .home-page-nav-item {
    width: 33.3%;
    height: 100%;
    text-align: center;
    .nav-icon {
      width: 0.8rem;
      height: 0.8rem;
      margin: 0.3rem auto 0 auto;
    }
    p {
      font-size: 0.28rem;
      font-weight: 700;
      color: #666;
      margin-top: 0.1rem;
    }
  }
  .home-page-title {
    position: relative;
    width: 6.9rem;
    height: 0.4rem;
    line-height: 0.4rem;
    margin: 0.65rem auto 0.4rem auto;
    padding-left: 0.3rem;
    &::after {
      content: "";
      position: absolute;
      width: 0.12rem;
      height: 0.32rem;
      border-radius: 0.6rem;
      background-color: #ffd74d;
      top: 0.03rem;
      left: 0;
    }
    h1 {
      font-size: 0.36rem;
      color: #222;
    }
    .more-text {
      float: right;
      font-size: 0.24rem;
      color: #999;
      font-weight: normal;
      .more-icon {
        display: inline-block;
        width: 0.15rem;
        height: 0.15rem;
        border-top: 2px solid #bbb;
        border-right: 2px solid #bbb;
        transform: rotate(45deg);
        vertical-align: 0.03rem;
      }
    }
  }
  .more-btn-box {
    margin-top: 0.25rem;
    text-align: center;
    &.more-btn-box-2 {
      margin: 0.5rem 0;
    }
  }
  .more-btn {
    width: 2rem;
    line-height: 0.64rem;
    height: 0.64rem;
    border: 1px solid #fbb649;
    color: #fbb649;
    border-radius: 0.32rem;
  }
  .brand-list {
    width: 7.2rem;
    margin: auto;
    font-size: 0;
  }
}
</style>
